<template>
    <div 
      class="avatar-container"
      :style="containerStyle"
      :class="[
        shapeClass,
        sizeClass,
        borderClass,
        { 'has-status': showStatus, 'is-online': status === 'online', 'is-offline': status === 'offline' }
      ]"
    >
      <!-- 图片头像 -->
      <img 
        v-if="src" 
        :src="src" 
        :alt="alt || '用户头像'"
        class="avatar-image"
        @error="handleImageError"
      >
      
      <!-- 文字头像 -->
      <div 
        v-else-if="text" 
        class="avatar-text"
        :style="textStyle"
      >
        {{ text }}
      </div>
      
      <!-- SVG头像 -->
      <svg 
        v-else-if="svgContent" 
        class="avatar-svg"
        :width="size" 
        :height="size"
        xmlns="http://www.w3.org/2000/svg"
      >
        <foreignObject width="100%" height="100%">
          <div xmlns="http://www.w3.org/1999/xhtml" v-html="svgContent"></div>
        </foreignObject>
      </svg>
      
      <!-- 默认头像 -->
      <div v-else class="avatar-default" :style="defaultStyle">
        <svg-icon name="user" size="20" color="#fff"></svg-icon>
      </div>
      
      <!-- 状态指示器 -->
      <div v-if="showStatus" class="status-indicator"></div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Avatar',
    props: {
      // 头像图片地址
      src: {
        type: String,
        default: ''
      },
      // 文字头像内容
      text: {
        type: String,
        default: ''
      },
      // SVG内容
      svgContent: {
        type: String,
        default: ''
      },
      // 头像尺寸
      size: {
        type: [Number, String],
        default: 'small',
        validator: (value) => {
          return ['small', 'medium', 'large', 'xlarge'].includes(value) || !isNaN(Number(value))
        }
      },
      // 头像形状
      shape: {
        type: String,
        default: 'circle',
        validator: (value) => {
          return ['circle', 'square', 'rounded']
        }
      },
      // 边框样式
      border: {
        type: [Boolean, String],
        default: false
      },
      // 状态显示
      showStatus: {
        type: Boolean,
        default: false
      },
      // 状态类型
      status: {
        type: String,
        default: 'online',
        validator: (value) => {
          return ['online', 'offline']
        }
      },
      // 图片加载失败时的替代文本
      alt: {
        type: String,
        default: ''
      },
      // 文字颜色
      textColor: {
        type: String,
        default: '#fff'
      },
      // 背景颜色
      bgColor: {
        type: String,
        default: ''
      },
      // 图片加载失败时的处理
      onError: {
        type: Function,
        default: null
      }
    },
    computed: {
      // 形状类名
      shapeClass() {
        return `avatar-${this.shape}`
      },
      // 尺寸类名
      sizeClass() {
        if (typeof this.size === 'string' && ['small', 'medium', 'large', 'xlarge'].includes(this.size)) {
          return `avatar-${this.size}`
        }
        return ''
      },
      // 边框类名
      borderClass() {
        if (this.border === true) {
          return 'avatar-border'
        } else if (typeof this.border === 'string') {
          return `avatar-border-${this.border}`
        }
        return ''
      },
      // 容器样式
      containerStyle() {
        const style = {}
        
        // 处理尺寸
        if (!isNaN(Number(this.size))) {
          const sizeValue = `${this.size}px`
          style.width = sizeValue
          style.height = sizeValue
        }
        
        // 处理背景颜色
        if (this.bgColor) {
          style.backgroundColor = this.bgColor
        }
        
        return style
      },
      // 文字样式
      textStyle() {
        return {
          color: this.textColor,
          fontSize: this.getFontSize()
        }
      },
      // 默认头像样式
      defaultStyle() {
        return {
          backgroundColor: this.bgColor || '#409eff'
        }
      }
    },
    methods: {
      // 计算字体大小
      getFontSize() {
        let baseSize = 14
        
        if (typeof this.size === 'string') {
          switch (this.size) {
            case 'small':
              baseSize = 12
              break
            case 'large':
              baseSize = 16
              break
            case 'xlarge':
              baseSize = 20
              break
          }
        } else if (!isNaN(Number(this.size))) {
          baseSize = Math.floor(Number(this.size) * 0.4)
        }
        
        return `${baseSize}px`
      },
      // 图片加载失败处理
      handleImageError() {
        if (this.onError) {
          this.onError()
        } else {
          // 默认降级为文字头像或默认头像
          this.src = ''
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .avatar-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  
  /* 尺寸预设 */
  .avatar-small {
    width: 32px;
    height: 32px;
  }
  
  .avatar-medium {
    width: 40px;
    height: 40px;
  }
  
  .avatar-large {
    width: 48px;
    height: 48px;
  }
  
  .avatar-xlarge {
    width: 64px;
    height: 64px;
  }
  
  /* 形状预设 */
  .avatar-circle {
    border-radius: 50%;
  }
  
  .avatar-square {
    border-radius: 2px;
  }
  
  .avatar-rounded {
    border-radius: 6px;
  }
  
  /* 边框样式 */
  .avatar-border {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  
  .avatar-border-dashed {
    border: 2px dashed #ddd;
  }
  
  /* 头像内容样式 */
  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .avatar-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }
  
  .avatar-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 状态指示器 */
  .status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
  }
  
  .is-online .status-indicator {
    background-color: #52c41a;
  }
  
  .is-offline .status-indicator {
    background-color: #f5222d;
  }
  
  /* 悬停效果 */
  .avatar-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  </style>
      